<div class="layuimini-main" style="padding-left: 40px">

    <div class="layui-form layui-form-pane">
        <fieldset class="layui-elem-field  layui-field-title">
            <legend style="color: red;">数据库字段暂不可修改</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">绑定模型</label>
            <div class="layui-input-block">
                <label>
                    <select name="model_id" lay-filter="model_id" disabled>
                        <option value="{{ $data['model']->id }}">{{ $data['model']->name }}</option>
                    </select>
                </label>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">字段名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="required" lay-reqtext="字段不能为空"
                       value="{{ $data['model_field']->name }}" class="layui-input" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">字段类型</label>
            <div class="layui-input-block">
                <select name="type" lay-filter="type" disabled>
                    @foreach(config('admin_config.db_table_field_type') as $v)
                        <option value="{{ $v }}" @if($data['model_field']->type == $v) selected @endif >{{ $v }}</option>
                    @endforeach
                </select>
                <div id="str_length" style="display: none">
                    <input type="number" name="field_length" value="" placeholder="对于char、string类型的字段，请在此输入字段长度" class="layui-input">
                </div>
                <div id="float_length" style="display: none">
                    <input type="number" name="field_total" value="" placeholder="对于浮点数类型的字段，请在此输入总位数" class="layui-input">
                    <input type="number" name="field_scale" value="" placeholder="对于浮点数类型的字段，请在此输入小数位数" class="layui-input">
                </div>
            </div>
        </div>

        <fieldset class="layui-elem-field layui-field-title">
            <legend>表单设置</legend>
        </fieldset>
        <div class="layui-form-item">
            <label class="layui-form-label">表单名称</label>
            <div class="layui-input-block">
                <input type="text" name="form_name" lay-verify="required" lay-reqtext="表单名称不能为空"
                       value="{{ $data['model_field']->form_name }}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">表单类型</label>
            <div class="layui-input-block">
                <select name="form_type" lay-filter="form_type">
                    @foreach(config('admin_config.form_type') as $k => $v)
                        <option value="{{ $k }}" @if($data['model_field']->form_type == $k) selected @endif >{{ $v }}</option>
                    @endforeach
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">表单备注</label>
            <div class="layui-input-block">
                <input type="text" name="form_comment" value="{{ $data['model_field']->form_comment }}" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label required">表单参数</label>
            <div class="layui-input-block">
                <textarea name="form_params" class="layui-textarea" placeholder="对于表单类型为单选框、多选框、下拉选择的，需在此配置对应参数。参数格式为：key=value，多个以换行分隔。也可以填写自定义的函数名称，函数名称需以getFormItemsFrom开头，返回值需与前述数据格式一致。对于下拉选择远程搜索表单类型，需在此填写搜索接口URL地址，接口返回数据格式可参考文档说明。">{!! $data['model_field']->form_params !!}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">表单默认值</label>
            <div class="layui-input-block">
                <input type="text" name="form_default_value" value="{{ $data['model_field']->form_default }}" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-inline">
                <input type="text" name="order" value="{{ $data['model_field']->order }}" lay-verify="required|number" autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux">
                请填写数字，按从小到大排列
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <div class="layui-inline">
                <label class="layui-form-label">是否显示</label>
                <div class="layui-input-inline">
                    <input type="radio" name="is_show" value="1" title="是" @if($data['model_field']->is_show == 1) checked @endif>
                    <input type="radio" name="is_show" value="0" title="否" @if($data['model_field']->is_show == 0) checked @endif>
                </div>
            </div>
        </div>
        <div class="layui-form-item" pane="">
            <div class="layui-inline">
                <label class="layui-form-label">是否必填</label>
                <div class="layui-input-inline">
                    <input type="radio" name="is_required" value="1" title="是" @if($data['model_field']->is_required == 1) checked @endif>
                    <input type="radio" name="is_required" value="0" title="否" @if($data['model_field']->is_required == 0) checked @endif>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <input type="hidden" value="{{ $data['id'] }}" id="id" name="id">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</div>
<script>
    layui.use(['form', 'iconPickerFa'], function () {
        var form = layui.form,
            layer = layui.layer,
            $ = layui.$;
        var miniPage = layui.miniPage;

        /**
         * 初始化表单，要加上，不然刷新部分组件可能会不加载
         */
        form.render();

        //监听提交
        form.on('submit(saveBtn)', function (data) {
            $.ajax({
                url: 'model-fields/' + data.field.id,
                method: 'PUT',
                data: data.field,
                success: function (res) {
                    console.log(res)
                    if (res.code === 0) {
                        layer.msg('保存成功', {icon: 1}, function () {
                            // 刷新列表
                            var options = {};
                            options.homeInfo = options.homeInfo || {};
                            miniPage.refresh(options);
                        })
                    } else {
                        layer.msg(res.msg, {icon: 5})
                    }
                },
                error: function (res) {
                    layer.msg('请求错误', {icon: 5})
                }
            });
            return false;
        });

        // 选择字段类型，显示长度框
        form.on('select(type)',function (data) {
            if (data.value === 'char' || data.value === 'string') {
                $('#str_length').show();
                $('#float_length').hide();
            } else if (data.value === 'float' || data.value === 'double' || data.value === 'decimal' || data.value === 'unsignedDecimal') {
                $('#str_length').hide();
                $('#float_length').show();
            } else {
                $('#str_length').hide();
                $('#float_length').hide();
            }
        })
        layui.event.call(null, 'form', 'select(type)', {'value': $('select[name=type]').val()});
    });
</script>
